<template>
	<div>
		<el-row>
			<h3>待确认订单详情</h3>
		</el-row>
		<el-table :data="cartList" 
			style="width: 100%;">
			<el-table-column label="图片" align="center">
				<template #default="scope">
					<el-avatar shape="square" :size="100"
						:src="`${$ServerUrl}/api/public/showImg/${scope.row.book.picture}`">
					</el-avatar>
				</template>
			</el-table-column>
			<el-table-column label="名称" prop="book.name"/>
			<el-table-column label="单价" prop="book.price" align="center"/>
			<el-table-column label="数量" prop="cart.num" align="center" />
			<el-table-column label="总价" align="center">
				<template #default="scope">
					{{scope.row.book.price * scope.row.cart.num}}
				</template>
			</el-table-column>
		</el-table>
		<el-row style="margin: 10px 0;">
			<el-col :span="2">联系电话</el-col>
			<el-col :span="18">
				<el-input type="phone" v-model.trim="phone" size="small" style="width: 30%;" maxlength="11"></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="2">收货地址</el-col>
			<el-col :span="18">
				<el-input v-model.trim="address" size="small"></el-input>
			</el-col>
		</el-row>
		<el-row>
			<label class="price">总价：￥{{totalPrice}}</label>
		</el-row>
		<el-row>
			<el-button type="success" @click="$router.push({'name':'cart_main'})">重新选择</el-button>
			<el-button type="danger" @click="Confirmorder()">确认订单</el-button>
		</el-row>
	</div>
</template>

<script>
import { ElMessage } from 'element-plus'
import {mapState} from 'vuex';
export default{
	name:'Make',
	data(){
		return {
			cartList:[],//商品列表
			ordid:null,
			address:null,
			phone:null
		}
	},
	computed:{
		...mapState(['orders']),
		totalPrice(){
			//计算总价
			let num = 0;
			this.cartList.reduce((a,b)=>{return num+=b.cart.num * b.book.price},num);
			return num;
		}
	},
	methods:{
		//创建订单
		Confirmorder(){
			if(this.cartList.length<1){
				ElMessage.error({
					message: '订单异常！',
				})
				return false;
			}else if(!this.address || !this.phone){
				ElMessage.error({
					message: '请填写收货信息！',
				})
				return false;
			}
			let arg = [];
			this.cartList.forEach((item)=>{
				arg.push({
					bookid:item.cart.bookid,
					price:item.book.price,
					num:item.cart.num,
				});
			})
			//创建新订单
			this.axios.post('/api/fore/cart/addCart2Order',arg).then((res)=>{
				let data = res.data;
				if(data.code==200){
					//订单创建成功,上传收货人信息
					this.ordid = data.data.ordid;//订单ID
					arg = {ordid:this.ordid,addr:this.address,phone:this.phone}
					this.axios.post('/api/fore/ord/addAddr',arg).then((res)=>{
						let data = res.data;
						if(data.code==200){
							//收货人信息上传成功，跳转至付款页面
							this.$router.push({name:'cart_pay',query:{ordid:this.ordid}})
						}else{
							ElMessage.error({
								message: '操作异常！',
							})
						}
					}).catch((err)=>{
						console.log(err);
					})
				}
			}).catch((err)=>{
				console.log(err);
			})
		}
	},
	//弹出消息提示
	PushMsg(type,message){
		if(type=='error'){
			ElMessage.error({
				message: message,
			})
		}else{
			ElMessage({
				message: message,
				type: type,
			})
		}
		
	}, 
	created() {
		this.cartList = this.orders;
		if(this.cartList.length<1){
			this.$router.push({'name':'cart_main'})
		}
	},
}
</script>

<style scoped>
.price{
	display: block;
	background-color: #ffdcbe;
	border-radius: 5px;
	padding: 5px 10px;
	margin: 10px 0;
	font-weight: bold;
	color: #e10000;
}
</style>
